<template>
  <view class="smt-index-list-item border-box flex">
    <view class="smt-index-list-item_image flex-shrink-0">
      <image src="" mode="widthFix" />
    </view>
    <view class="smt-index-list-item_content flex-1 flex flex-column">
      <view class="title font-bold onespace-ellipsis flex-shrink-0">
        {{ itemData.title }}
      </view>
      <view class="tags flex-shrink-0 flex items-center">
        <smt-tag
          class="tag flex-shrink-0"
          v-for="(tag, index) in itemData.tags"
          :text="tag.label"
          :key="index"
          :textColor="tag.textColor"
          :backgroundColor="tag.backgroundColor"
        ></smt-tag>
      </view>
      <view class="describe">
        {{ itemData.describe }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: () => ({
        title: "酸汤肥牛加四个底菜，底菜酸汤肥牛加四个底菜，底菜",
        tags: [
          { label: "特色美食" },
          {
            label: "特色美食",
            textColor: "rgba(23, 125, 244, 1)",
            backgroundColor: "rgba(23, 125, 244, 0.1)",
          },
        ],
        describe:
          "本餐厅为职工提供日常饭菜，食堂本着饭菜的色、香、味、型俱佳。本餐厅为职工提供日常饭菜，食堂本着饭菜的色、香、味、型俱佳。",
      }),
    },
  },
};
</script>

<style lang="scss" scoped>
.smt-index-list-item {
  padding: 30rpx;
  background: $smt-index-list-item-bg;
  height: 240rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  &_image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background: pink;
    margin-right: 30rpx;
  }
  &_content {
    width: 0;
    font-size: $smt-font-size-16;
    .title {
      width: 100%;
    }
    .describe {
      font-size: $smt-font-size-12;
      line-height: 34rpx;
      color: $smt-color-6;
      height: calc(34rpx * 2);
    }
    .tags {
      .tag {
        &:not(:first-child) {
          margin-left: 10rpx;
        }
      }
    }

    > view {
      &:not(:first-child) {
        width: 100%;
        overflow: hidden;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
